<%@ page pageEncoding="UTF-8"%>
<!-- 显示图片区域 -->
<div class="thumbnail" id="div-img" style="display: none">
	<img id="upload-img"/>
	<div class="caption text-right">
		<a href="#" class="btn btn-danger btn-xs" id="del-img">删除</a>
	</div>
</div>
<!-- 上传图片按钮 -->
<button class="btn btn-default" type="button" onclick="$('#input-file').click();">上传图片</button>
<input id="input-file" name="input-file" type="file" accept="image/*" style="display: none">
<script>
	$("#input-file").change(function(e) {  
		 for (var i = 0; i < e.target.files.length; i++) {  
	         var file = e.target.files.item(i);  
	         if (!(/^image\/.*$/i.test(file.type))) {  
	        	//不是图片 就跳出这一次循环 
	        	 continue;  
	         }  
	         //实例化FileReader API  
	         var freader = new FileReader();  
	         freader.readAsDataURL(file);  
	         freader.onload = function(e) {
		         $("#upload-img").attr("src", e.target.result);
		         $('#div-img').show();
	         };
	     }
	});
	//删除图片
	$('#del-img').click(function(){
		$("#upload-img").attr("src", "");
		$('#input-file').val('');
		$('#div-img').hide();
	});
</script>
   